<template>
  <div>

      <el-scrollbar
            style="height: 100%"
            wrap-class="scrollbar-wrapper">
    <div style="height:600px" class="infinite-list">
    <el-timeline class="timeLine"  v-infinite-scroll="load">
      <el-timeline-item v-for="item in activities" :color="item.style">
        <div v-if="item.type == 'date-day'" >
          <p style="text-align: left">{{ timeTransToDay(item.date) }}</p>
        </div>
        <div
          v-else
          style="display: flex; flex-direction: column; justify-content: start"
        >
          <span
            style="text-align: left; font: 16px Medium; font-weight: bold"
            >{{ item.description }}</span
          >

          <span style="text-align: left; font: 14px Base; color: #606266">{{
            item.content
          }}</span>
          <p style="text-align: left">{{ timeTransTominute(item.time) }}</p>
        </div>
      </el-timeline-item>
    </el-timeline>
    

    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import qs from "qs";
import axios from "axios";
import { getTimeLine,getMoreLine} from "../api/testApi";
export default {
  data() {
    return {
      count: 0,
      activities: [
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
        },
        {
          content: "支持自定义颜色",
          timestamp: "2018-04-03 20:46",
          color: "#0bbd87",
        },
        {
          content: "支持自定义尺寸",
          timestamp: "2018-04-03 20:46",
          size: "large",
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03 20:46",
        },
      ],
      
      query: {
        _id: "5fdac51570a56dffacfd8fbb",

        company_id: "abc",

        app_id: "abc",

        modul_id: "bbc",

        role_id: "222",

        layout_id: "888888",
      },
      page:0
    };
  },
  methods: {
    load() {
      let requestData = qs.stringify({
        postData: JSON.stringify(
            {page:this.page}
            ),
      });
      getMoreLine(requestData).then(response=>{
            let data=response.data.data.records;
            data.forEach(item=>{
                this.activities.push(item)
                console.log(item)
            })
            // this.activities = response.data.data.records;
            
      })
      this.page++
    },
    init() {
      getTimeLine(this.query).then((response) => {
        this.activities = response.data.data.records;

        console.log(this.activities);
      });
    },

    timeTransToDay(timestamp) {
      return this.$moment(timestamp * 1).format("YYYY-MM-DD ");
    },
    timeTransTominute(timestamp) {
      return this.$moment(timestamp * 1).format("MM-DD HH:mm ");
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style  scoped>
.timeLinw {
  min-width: 200px;
}
</style>